<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #login {
            width: 380px;
            height: 524px;
            margin: 30px 0 0 20px;
            background-color: #FFFFFF;
            border: 1px solid black;
            position: relative;
        }

        #login>div>div:last-child {
            width: 316px;
            margin: 0 auto;
        }

        #login>div>div:first-child>span {
            display: inline-block;
            width: 168px;
            height: 24px;
            font-size: 20px;
            text-align: center;
            color: #333333;
            margin: 30px 0;
        }

        #login>div>div:first-child>span.active {
            color: red;
        }

        /* 没有 active 样式的, 隐藏 */
        #login>div>div:last-child>div:not(.active) {
            display: none;
        }

        #login>div>div:last-child input {
            width: 297px;
            height: 40px;
            margin-bottom: 15px;
            padding-left: 15px;
            border: 1px solid #cbcbcb;
        }

        #login>div>div:last-child .yz {
            width: 179px;
            height: 40px;
            margin-bottom: 15px;
        }

        /* 立即登录 */
        #login>div>div:last-child button {
            width: 100%;
            height: 40px;
            margin-bottom: 15px;
        }

        #login>div>div:last-child .yzb {
            width: 108px;
            height: 40px;
            margin-bottom: 15px;
        }

        #login a {
            text-decoration: none;
            color: #999;
            float: right;
            display: block;
        }

        #login p {
            text-align: center;
            color: #999;
            font-size: 14px;
        }

        #login-other {
            width: 100%;
            /* background-color: red; */
            bottom: 30px;
            position: absolute;
        }

        .box {
            position: relative;
            /* padding-top: 10px; */
            margin-bottom: 15px;
        }

        .pos {
            position: absolute;
            left: 50%;
            width: 100px;
            height: 20px;
            margin-left: -50px;
            background-color: #fff;
            color: #999999;
            top: -18px;
            line-height: 40px;
            text-align: center;
        }

        #login-other>div:last-child {
            display: flex;
            justify-content: space-between;
        }

        #login-other img {
            display: block;
            width: 30px;
            height: 30px;
        }
    </style>
</head>

<body>
    <div id="login">
        <div>
            <div>
                <span data-id="tab1" class="active">短信登陆</span>
                <b>|</b>
                <span data-id="tab2">账号登陆</span>
            </div>
            <div>
                <div id="tab1" class="active">
                    <input type="text" placeholder="手机号码">
                    <input class="yz" type="text" placeholder="图片验证码">
                    <button class="yzb">图片验证</button>
                    <input class="yz" type="text" placeholder="短信验证码">
                    <button class="yzb">获取验证码</button>
                    <button>立即登录</button>
                    <p>若无账号，使用验证码登录成功后默认创建账号</p>
                </div>
                <div id="tab2">
                    <input type="text" placeholder="邮箱/手机号码">
                    <input type="text" placeholder="密码">
                    <button>立即登录</button>
                    <a href="">忘记密码？</a>
                </div>
            </div>
        </div>
        <div id="login-other">
            <div class="box">
                <div class="pos">其他登录方式</div>
                <hr>
            </div>
            <div>
                <a href="">
                    <img src="../img/login.htnl/支付宝.png" alt="">
                </a>
                <a href="">
                    <img src="../img/login.htnl/QQ.png" alt="">
                </a>
                <a href="">
                    <img src="../img/login.htnl/微信.png" alt="">
                </a>
            </div>
        </div>
    </div>

    <script src="../vendor/jquery-3.6.0.js"></script>
    <script>
        $('#login>div>div:eq(0)>span').click(function () {
            $(this).addClass('active').siblings().removeClass('active')

            const id = $(this).data('id') //读取标题上存储的自定义属性
            // 假设 id='tab1',  
            // 下方拼接出的 '#tabs #tab1'
            $(`#login #${id}`).addClass('active').siblings().removeClass('active')
        })
    </script>
</body>

</html>